
<template>
<div>
 <button @click="change">点击</button>
 <div>{{ messname}}{{age}}</div>
</div>
</template>
<script setup lang="ts">
import {ref,Ref,isRef,shallowRef,triggerRef,customRef} from 'vue'
//1.ref:数据响应式
// let messname = ref<string | number>("我是周杰伦")
// const change =() =>{
// messname.value = '我是邓紫棋'
// }

// 2.isRef:判断是不是一个ref对象
// let messname = ref<string | number>("我是周杰伦")
// let age:number =18
// const change =() =>{
// console.log(isRef(messname)) // true
// console.log(isRef(age)) // false
// }

// 3.shallowRef：创建一个跟踪自身 .value 变化的 ref，控制台输出变了，但是视图页面没变不是响应式
// type Obj = {
//   name: string
// }
// let messname: Ref<Obj> = shallowRef({
//   name: "周杰伦"
// })
// const change =() =>{
// messname.value.name ="邓紫棋"
// console.log(messname.value.name) //邓紫棋 
// }

//这样就可以监听到修改的messname了
// const change =() =>{
// messname.value={name:"邓紫棋"}
// }

// 4.triggerRef:强制更新页面DOM
// type Obj = {
//   name: string
// }
// let messname: Ref<Obj> = shallowRef({
//   name: "周杰伦"
// })
// const change =() =>{
//  messname.value.name ="邓紫棋"
//  triggerRef(messname)
// }

// customRef:customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set
 function myref<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal: T) {
        console.log('set');
        value = newVal
        trigger()
      }
    }
  })
}
 
let messname = myref('周杰伦')
const changeMsg = () => {
  messname.value = '邓紫棋'
  // triggerRef(messname)
}


</script>


<style>

</style>
